<template>
	<!-- 歌单列表 -->
	<view class="SongLists">
		<!-- 分类列表 -->
		<view class="categoryList">
			<view :class="{categoryListHover:categoryId==item.categoryId}" v-for="item in categoryList"
				@click="categoryId=item.categoryId">
				{{item.categoryName}}
			</view>
			<view @click="toCateGoryList">
				<uni-icons type="bars"></uni-icons>
			</view>
		</view>
		<SongList :categoryId="categoryId"></SongList>
		<AudioPlayer></AudioPlayer>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onReachBottom
	} from "@dcloudio/uni-app"

	import {
		toCateGoryList
	} from "@/utils/Redirect.js"
	import {
		ref
	} from "vue";
	const categoryId = ref()
	//存放歌单分类
	const cateGories = uni.getStorageSync("cateGories")
	//分类标题列表
	const categoryList = cateGories.map((item) => {
		return item.items[0]
	})
	onLoad((data) => {
		categoryId.value = data.data
	})
	onReachBottom(() => {

	})
</script>
<style scoped>
	.SongLists {
		padding: 0 10rpx;
	}

	.categoryListHover {
		background-color: #26262e;
		color: #dddddd;
	}

	.categoryList {
		position: sticky;
		top: 44px;
		padding: 10rpx 0;
		display: flex;
		justify-content: space-around;
		color: #7a7a7a;
		background-color: #1b1b25;
		z-index: 1;
	}

	.categoryList>view {
		padding: 10rpx 20rpx;
		border-radius: 50px;
		transition: 0.5s;
	}
</style>